<template>
	<view class="wrap">

		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<head-nav-bar :flag="false" />
		<view class="avatar" @click="login()">
			<image class="img" v-if="userStatus == 0" :src="avatar" mode=""></image>
			<view v-else class="imgBox">
				<image class="img" :src="avatarUrl" mode=""></image>
				<image v-if="isVip" class="level" src="https://tb.wuyouzhuan888.com/applet-icon/level.png" mode="">
				</image>
			</view>
			<view class="info">
				<view class="top">
					{{nickname}}
				</view>
				<view class="status" v-if="!isIPhone">
					<text v-if="isVip">会员到期时间：{{vipExpireTime}}</text>
					<text v-else>未开通（开通会员享受更多权益）</text>
				</view>
			</view>
			<view class="make">
				<view class="title">
					制作币
				</view>
				<view class="num">
					<image src="https://tb.wuyouzhuan888.com/applet-icon/bi.png" style="width: 80rpx;height: 80rpx;"></image>
					{{coins}}枚
				</view>
			</view>
		</view>
		<view class="vips" v-if="!isIPhone">
			<view class="top">
				<view class="level">
					VIP会员
				</view>
				<view class="des">
					免广告下载高清原图
				</view>
			</view>
			<view class="bot">
				<view class="left">
					<text v-if="isVip">已开通会员</text>
					<text v-else>您还不是VIP，速抢更多优惠福利！</text>
				</view>
				<view @click="buy" class="btn">
					<text v-if="isVip">立即续费</text>
					<text v-else>立即开通</text>
				</view>
			</view>
		</view>
		<view class="list1">
			<view class="item" v-for="item in list1" @click="navTo(item.route)">
				<image class="img" :src="item.url" mode=""></image>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="productionRecord" @click="goProductionRecord">
			<view class="item">
				<view class="left">
					<image class="img" src="https://tb.wuyouzhuan888.com/applet-icon/jl.png" mode=""></image>
					<view class="name">
						制作记录
					</view>
				</view>
				<image class="narrow" src="https://tb.wuyouzhuan888.com/applet-icon/u9.png" mode="">
				</image>
			</view>
			<view class="videoList" style="width: 100%;height: 300rpx;display: flex;align-items: center;"
				v-if="list3.length>0">
				<view class="img" style="width:30%;height: 300rpx;" v-for="item in list3">
					<view class="shu" v-if="item.types==2"
						style="border: 1px solid #FFFFFF;border-radius:15rpx;width: 100%;height: 100%;background-color: #000000;">
						<image :src="item.cover_url" style="width: 100%;height: 100%;border-radius: 15rpx;"></image>
					</view>

					<view class="heng" v-if="item.types==1"
						style="width: 100%;height:100%;display: flex;align-items: center;border: 1px solid #FFFFFF;border-radius:15rpx;position: relative;overflow: hidden;">
						<image :src="item.cover_url"
							style="width:100%;height: 143rpx;position: absolute;top:50%;transform: translateY(-50%);z-index: 100;">
						</image>
						<image :src="item.cover_url" style="width:100%;height: 100%;filter: blur(25rpx);"></image>
					</view>

				</view>
			</view>
		</view>
		<view class="list2">
			<view class="item" v-for="item in list2" @click="navTo(item.route)">
				<view class="left">
					<image class="img" :src="item.url" mode=""></image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				<image class="narrow" src="https://tb.wuyouzhuan888.com/applet-icon/u9.png" mode="">
				</image>
			</view>
			<view class="item" @click="contastUs()">
				<view class="left">
					<image class="img" src="https://tb.wuyouzhuan888.com/applet-icon/u7.png" mode="">
					</image>
					<view class="name">
						联系我们
					</view>
				</view>
				<image class="narrow" src="https://tb.wuyouzhuan888.com/applet-icon/u9.png" mode="">
				</image>
			</view>
			<view class="item">
				<view class="left">
					<image class="img" src="https://tb.wuyouzhuan888.com/applet-icon/u8.png" mode="">
					</image>
					<view class="name">
						分享给好友
					</view>
				</view>
				<image class="narrow" src="https://tb.wuyouzhuan888.com/applet-icon/u9.png" mode="">
				</image>
				<button class="btn" open-type="share"></button>
			</view>
		</view>
		<u-popup border-radius="20" v-model="sampleMask" mode="center">
			<image @click="sampleMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png" mode=""></image>
			<view class="qq">
				<sampleMask @clickSample="clickSample" />
			</view>
		</u-popup>
	</view>
</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import sampleMask from '../../../components/mask/sample.vue';
	export default {
		components: {
			HeadNavBar,
			sampleMask,
		},
		data() {
			return {
				avatar: '',
				list1: [{
					name: '我的订单',
					route: '/pages/sys/user_bags/order',
					url: 'https://tb.wuyouzhuan888.com/applet-icon/u1.png',
				}, {
					name: '下载记录',
					route: '/pages/sys/user_bags/download',
					url: 'https://tb.wuyouzhuan888.com/applet-icon/u2.png',
				}, {
					name: '浏览记录',
					route: '/pages/sys/user_bags/history',
					url: 'https://tb.wuyouzhuan888.com/applet-icon/u3.png',
				}],
				list2: [{
					name: '常见问题',
					route: '/pages/sys/user_bags/problem',
					url: 'https://tb.wuyouzhuan888.com/applet-icon/u4.png',
				}, {
					name: '我要吐槽',
					route: '/pages/sys/user_bags/comment',
					url: 'https://tb.wuyouzhuan888.com/applet-icon/u5.png',
				}, {
					name: '关于我们',
					route: '/pages/sys/user_bags/about',
					url: 'https://tb.wuyouzhuan888.com/applet-icon/u6.png',
				}, ],
				sampleMask: false,
				// 苹果手机
				isIPhone: false,
				// 用户状态 0游客 1非游客
				userStatus: 0,
				nickname: '登录/注册',
				// 用户头像
				avatarUrl: '',
				// 会员到期时间
				vipExpireTime: '',
				// 是否是会员
				isVip: false,
				imId: '179962894',
				list3: [],
				coins: 0
			};
		},
		onShow() {
			this.avatar = uni.getStorageSync('avatar')
			uni.hideLoading()
		},
		onLoad() {

			uni.showLoading({
				title: '加载中...'
			})

			// 判断手机平台是否为苹果
			this.isIPhone = (uni.getSystemInfoSync().osName == 'ios')

			if (uni.getStorageSync('userInfo')) {
				const userInfo = uni.getStorageSync('userInfo');
				this.userStatus = 1;
				this.nickname = userInfo.nickName;
				this.avatarUrl = userInfo.avatarUrl;
			} else {
				// 游客
				this.userStatus = 0;
				this.nickname = '登录/注册';
			}
			this.getCoins()
			// 获取会员信息
			this.getVipInfo()
			this.makeList()
		},
		// 加载分享信息
		async onShareAppMessage() {
			if (this.shareTitle == '') {
				// #ifdef MP-TOUTIAO
				// 获取分享信息
				await this.getDyShareInfo();
				// #endif
			}

			return {
				// 标题
				title: this.shareTitle,
				// url
				path: 'pages/sys/home/index',
				templateId: this.shareId,
			};
		},

		methods: {
			// 制作币
			getCoins() {
				this.$u.api.video.getCoins({}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					this.coins = res.data.coins
				})
			},
			goProductionRecord() {
				uni.navigateTo({
					url: '/pages/sys/user_bags/productionRecord'
				})
			},
			makeList() {
				this.$u.api.video.makeList({
					size: 3,
					page: 1
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.list3 = res.data.list
				})
			},
			login() {
				if (this.userStatus != 0) {
					return
				}
				const that = this;
				// 获取用户信息
				uni.getUserProfile({
					provider: '',
					success(res) {
						uni.setStorageSync('userInfo', res.userInfo);
						that.userStatus = 1;
						that.nickname = res.userInfo.nickName;
						that.avatarUrl = res.userInfo.avatarUrl;
					}
				});
			},
			// 获取会员信息
			getVipInfo() {
				this.$u.api.mine.getVipInfo().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}
					this.isVip = res.data.isVip
					this.vipExpireTime = res.data.vipExpireTime
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 联系我们
			contastUs() {
				// 获取联系我们客服地址
				this.$u.api.mine.getCustomerUrl().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}

					uni.navigateTo({
						url: '/pages/sys/user_bags/webview?url=' + res.data.customerUrl
					})
				})
			},
			buy() {
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy",
					events: {
						isVip: data => {
							// 重新请求接口
							this.getVipInfo();
							if (!data) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							}

						}
					}
				})
			},
			// 点击体验卡
			clickSample() {
				// 打开体验会员弹窗
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?sample=" + true,
					events: {
						isVip: data => {
							// 重新请求接口
							this.getVipInfo();
							if (!data) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							} else {
								this.sampleMask = false
							}
						}
					}
				})
			},
			// 获取抖音分享信息
			getDyShareInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getShareInfo().then(res => {
						this.shareId = res.data.shareId;
						this.shareTitle = res.data.shareTitle;
						resolve();
					})
				})
			},

		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 24rpx 32rpx;

		/deep/ .u-mode-center-box {
			background: none !important;
			overflow: initial !important;
		}

		.close {
			width: 65rpx;
			height: 65rpx;
			display: block;
			position: fixed;
			top: 127rpx;
			right: 41rpx;
			z-index: 999;
			// background: rgba(255,255,255,0.8);
			// margin: 46rpx auto;
		}

		.img {
			width: 132rpx;
			height: 132rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.productionRecord {
			margin: 32rpx 0;
			background: #1E1E38;
			border-radius: 16rpx;
			padding: 34rpx 39rpx 33rpx 40rpx;

			.item {
				position: relative;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					width: 100%;
					// height: 50px;
					opacity: 0;
				}


				&:last-child {
					margin-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 33rpx;

					.img {
						width: 44rpx;
						height: 44rpx;
						margin-right: 16rpx;
					}
				}

				.narrow {
					width: 13rpx;
					height: 22rpx;
				}
			}
		}

		.list2 {
			margin: 32rpx 0;
			background: #1E1E38;
			border-radius: 16rpx;
			padding: 34rpx 39rpx 33rpx 40rpx;

			.item {
				position: relative;
				margin-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					width: 100%;
					opacity: 0;
				}


				&:last-child {
					margin-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 33rpx;

					.img {
						width: 44rpx;
						height: 44rpx;
						margin-right: 16rpx;
					}
				}

				.narrow {
					width: 13rpx;
					height: 22rpx;
				}
			}
		}

		.list1 {
			background: #1E1E38;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 42rpx 64rpx;
			margin-top: 20rpx;

			.item {

				.img {
					width: 93rpx;
					height: 93rpx;
					margin: 0 auto;
					display: block;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 35rpx;
					margin-top: 16rpx;
				}
			}
		}

		.vips {
			margin: 22rpx 0 0;
			background: url('https://tb.wuyouzhuan888.com/appleticon/vipbg.png') no-repeat;
			background-size: cover;
			width: 686rpx;
			height: 309rpx;

			.bot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 42rpx 0 63rpx;

				.left {
					font-size: 24rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					color: #D5D4FF;
					line-height: 28rpx;
				}

				.btn {
					background: linear-gradient(to right, #4659FF, #A181FF);
					width: 195rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 70rpx;
				}
			}

			.top {
				padding: 61rpx 0 79rpx 63rpx;

				.level {
					font-size: 48rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					line-height: 56rpx;
					// text-shadow: 0px 2px 0px rgba(28,29,53,0.42);
					background: linear-gradient(180deg, #FFE4BB 0%, #FFFFFF 30%, #F4F2FF 42%, #F0DD98 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.des {
					font-size: 28rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					color: #A6A4FF;
					line-height: 33rpx;
					margin-top: 5rpx;
				}
			}
		}

		.avatar {
			display: flex;
			align-items: center;


			.imgBox {
				width: 132rpx;
				height: 132rpx;
				position: relative;
				margin-right: 24rpx;

				.level {
					position: absolute;
					top: 0;
					right: 0;
					width: 55rpx;
					height: 46rpx;
				}

				.img {
					width: 132rpx;
					height: 132rpx;
					border-radius: 50%;

				}
			}


			.info {
				flex: 1;

				.top {
					font-size: 32rpx;
					font-family: PingFang HK-Regular, PingFang HK;
					font-weight: 400;
					color: #FFFFFF;
					margin-bottom: 15rpx;
				}

				.status {
					font-size: 20rpx;
					font-family: PingFang SC-Light, PingFang SC;
					font-weight: 300;
					color: rgba(255, 255, 255, 0.8);
					border-radius: 31rpx;
					background: rgba(255, 255, 255, 0.15);
					padding: 4rpx 8rpx 4rpx 20rpx;
					display: inline-flex;
				}
			}
		}
	}

	.make {
		background-image: url('https://tb.wuyouzhuan888.com/applet-icon/xiaohao.png');
		background-size: 100% 100%;
		width: 210rpx;
		height: 132rpx;
		.title {
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.num {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}
</style>